import React from 'react'

import {Routes, Route, Navigate} from 'react-router-dom'

import NotFind from './views/404'

import Login from './views/Login'
import Main from './views/Main'

import About from './views/Main/About'
import Home from './views/Main/Home'

export default function App() {
  /* 
    Navigate组件：
      当不管什么情况下接收了这个 Navigate组件,则路由会按照这个组件的to的地址重新执行路由跳转
  
    路径是 * 代表所有路径，先匹配非*的所有的路径 如果匹配不到，则执行*代表的路由组件
  */
  return (
    <div>
      <Routes>
        <Route path='/login' element={<Login />} />
        <Route path='/main' element={<Main />}>
          <Route path='/main/about' element={<About />} />
          <Route path='/main/home' element={<Home />} />
          <Route path='/main/' element={<Navigate to='/main/about'/>} />
        </Route>
        <Route path='/' element={<Navigate to='/login'/>} />
        <Route path='*' element={<NotFind />} />
      </Routes>
    </div>
  )
}
